import { cB, c, cE } from '../../../../_utils/cssr';
import createIconSwitchTransition from '../../../../_styles/transitions/icon-switch.cssr'; // vars:
// --bezier
// --clear-color
// --clear-size
// --clear-color-hover
// --clear-color-pressed

export default cB('base-clear', `
 flex-shrink: 0;
 height: 1em;
 width: 1em;
 position: relative;
`, [c('>', [cE('clear', `
 font-size: var(--clear-size);
 cursor: pointer;
 color: var(--clear-color);
 transition: color .3s var(--bezier);
 `, [c('&:hover', `
 color: var(--clear-color-hover)!important;
 `), c('&:active', `
 color: var(--clear-color-pressed)!important;
 `)]), cE('placeholder', `
 display: flex;
 `), cE('clear, placeholder', `
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translateX(-50%) translateY(-50%);
 `, [createIconSwitchTransition({
  originalTransform: 'translateX(-50%) translateY(-50%)',
  left: '50%',
  top: '50%'
})])])]);